<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <title></title>
  <link href="workflow_plugins/designer/designer.css" type="text/css" rel="stylesheet"/>
  <link href="js_plugins/jquery/js/themes/default/easyui.css" type="text/css" rel="stylesheet"/>
  			
        <!-- common, all times required, imports -->
        <SCRIPT src='workflow_plugins/lib/wz_jsgraphics.js'></SCRIPT>          
        <SCRIPT src='workflow_plugins/lib/mootools.js'></SCRIPT>          
        <SCRIPT src='workflow_plugins/lib/moocanvas.js'></SCRIPT>                        
        <SCRIPT src='workflow_plugins/lib/draw2d.js'></SCRIPT>


        <!-- example specific imports -->
        <SCRIPT src="workflow_plugins/designer/MyCanvas.js"></SCRIPT>
        <SCRIPT src="workflow_plugins/designer/ResizeImage.js"></SCRIPT>
        <SCRIPT src="workflow_plugins/designer/designer.js"></SCRIPT>
		<SCRIPT src="workflow_plugins/designer/event/Start.js"></SCRIPT>
		<SCRIPT src="workflow_plugins/designer/event/End.js"></SCRIPT>
		<SCRIPT src="workflow_plugins/designer/connection/MyInputPort.js"></SCRIPT>
		<SCRIPT src="workflow_plugins/designer/connection/MyOutputPort.js"></SCRIPT>
		<SCRIPT src="workflow_plugins/designer/connection/DecoratedConnection.js"></SCRIPT>
		<SCRIPT src="workflow_plugins/designer/task/Task.js"></SCRIPT>
		<SCRIPT src="workflow_plugins/designer/task/UserTask.js"></SCRIPT>
		<SCRIPT src="workflow_plugins/designer/task/ManualTask.js"></SCRIPT>	
		<SCRIPT src='js_plugins/jquery/js/jquery-1.6.min.js'></SCRIPT>
  		<script src="js_plugins/jquery/js/jquery.easyui.min.js" type="text/javascript"></script>

</head>
<script type="text/javascript">
<!--
var jq = jQuery.noConflict();
var taskArray=[];
jq(function(){
	_process_panel = jq('#process-panel');
	workflow.scrollArea=_process_panel.get(0);
	_task_obj = jq('#task');
	_properties_panel_obj = jq('#designer').layout('panel','east');
	jq('.easyui-linkbutton').draggable({
				proxy:function(source){
					var n = jq('<div class="draggable-model-proxy"></div>');
					n.html(jq(source).html()).appendTo('body');
					return n;
				},
				deltaX:0,
				deltaY:0,
				revert:true,
				cursor:'auto',
				onStartDrag:function(){
					jq(this).draggable('options').cursor='not-allowed';
				},
				onStopDrag:function(){
					jq(this).draggable('options').cursor='auto';
				}	
	});
	jq('#paintarea').droppable({
				accept:'.easyui-linkbutton',
				onDragEnter:function(e,source){
					jq(source).draggable('options').cursor='auto';
				},
				onDragLeave:function(e,source){
					jq(source).draggable('options').cursor='not-allowed';
				},
				onDrop:function(e,source){
					//jq(this).append(source)
					//jq(this).removeClass('over');
					var wfModel = jq(source).attr('wfModel');
					if(wfModel){
						var x=jq(source).draggable('proxy').offset().left;
						var y=jq(source).draggable('proxy').offset().top;
						var xOffset    = workflow.getAbsoluteX();
	                    var yOffset    = workflow.getAbsoluteY();
	                    var scrollLeft = workflow.getScrollLeft();
	                    var scrollTop  = workflow.getScrollTop();
	                  //alert(xOffset+"|"+yOffset+"|"+scrollLeft+"|"+scrollTop);
	                    addModel(wfModel,x-xOffset+scrollLeft,y-yOffset+scrollTop);
					}
				}
			});
	jq('#btn_save').click(function(){
		alert("save");
	});
});
function addModel(name,x,y){
	var task = eval("new "+name+"()");
	//userTask.setContent("DM Approve");
	task.setId(name+new Date().getTime());
	workflow.addFigure(task,x,y);
	var id = task.getId();
	var jqTask = jq(task.getHTMLElement());
	jqTask.bind('click',{id:id},function(e){
		alert(e.data.id);
		_properties_panel_obj.panel('refresh','taskProperties.html');
	});
	taskArray[taskArray.length]={id:task.getId(),task:jqTask};
}
//-->
</script>
<body id="designer" class="easyui-layout" style="overflow-y: hidden" scroll="no">
	<div region="west" split="true" iconCls="palette-icon" title="控制面版" style="width:150px;overflow:hidden;">
		<div class="easyui-accordion" fit="true" border="false">
<!--				<div id="connection" title="Connection" iconCls="palette-menu-icon" class="palette-menu">-->
<!--					<a href="##" class="easyui-linkbutton" plain="true" iconCls="sequence-flow-icon">SequenceFlow</a><br>-->
<!--				</div>-->
				<div id="event" title="事件" iconCls="palette-menu-icon" class="palette-menu">
					<a href="##" class="easyui-linkbutton" plain="true" iconCls="start-event-icon">开始</a><br>
					<a href="##" class="easyui-linkbutton" plain="true" iconCls="end-event-icon">结束</a><br>
				</div>
				<div id="task" title="任务" iconCls="palette-menu-icon" selected="true" class="palette-menu">
					<a href="##" class="easyui-linkbutton" plain="true" iconCls="user-task-icon" wfModel="draw2d.UserTask">用户任务</a><br>
					<a href="##" class="easyui-linkbutton" plain="true" iconCls="manual-task-icon" wfModel="draw2d.ManualTask">手动任务</a><br>
					<a href="##" class="easyui-linkbutton" plain="true" iconCls="service-task-icon">服务任务</a><br>
					<a href="##" class="easyui-linkbutton" plain="true" iconCls="script-task-icon">脚本任务</a><br>
					<a href="##" class="easyui-linkbutton" plain="true" iconCls="mail-task-icon">Mail任务</a><br>
					<a href="##" class="easyui-linkbutton" plain="true" iconCls="receive-task-icon">接收任务</a><br>
					<a href="##" class="easyui-linkbutton" plain="true" iconCls="business-rule-task-icon">业务规则任务</a><br>
					<a href="##" class="easyui-linkbutton" plain="true" iconCls="subprocess-icon">(嵌入的)子流程</a><br>
					<a href="##" class="easyui-linkbutton" plain="true" iconCls="callactivity-icon">调用活动</a><br>
				</div>
				<div id="gateway" title="分支" iconCls="palette-menu-icon" class="palette-menu">
					<a href="##" class="easyui-linkbutton" plain="true" iconCls="parallel-gateway-icon">并行分支</a><br>
					<a href="##" class="easyui-linkbutton" plain="true" iconCls="exclusive-gateway-icon">单一分支</a><br>
				</div>
				<div id="boundary-event" title="边界" iconCls="palette-menu-icon" class="palette-menu">
					<a href="##" class="easyui-linkbutton" plain="true" iconCls="timer-boundary-event-icon">时间边界</a><br>
					<a href="##" class="easyui-linkbutton" plain="true" iconCls="error-boundary-event-icon">异常边界</a><br>
				</div>
		</div>
	</div>
	<div id="process-panel" region="center" split="true" iconCls="process-icon" title="流程" style="overflow:hidden;overflow-x:auto;overflow-y:auto;padding:1px;">
		<div id="paintarea" style="POSITION: relative; WIDTH: 3000px; HEIGHT: 3000px" ></div>
	</div>
	<div id="properties-panel" region="east" split="true" iconCls="properties-icon" title="属性" style="width:300px;">
		
	</div>
	<div id="toolbar-panel" region="north" border="false" style="height:36px;">
		<div style="padding:5px;">
			<a href="javascript:void(0)" id="btn_save" class="easyui-splitbutton" >保 存</a>
		</div>
	</div>
	<script type="text/javascript">
	<!--
	var workflow  = new draw2d.MyCanvas("paintarea");
		// Add the start,end,connector to the canvas
	  var startObj = new draw2d.Start("workflow_plugins/designer/icons/type.startevent.none.png");
	  startObj.setId("startObj");
	  workflow.addFigure(startObj, 50,200);
	  
	  var endObj   = new draw2d.End("workflow_plugins/designer/icons/type.endevent.none.png");
	  endObj.setId("endObj");
	  workflow.addFigure(endObj,700,200);
	//-->
	</script>
</body>
</html>
